import SwiftUI

struct ListCard: View {
    var item:MainPica = mainpicas[1]
    var tag: String = "hot"
    @State var isPressed: Bool = false
    @StateObject private var viewModel = FavModel()
    
    var body: some View {
        ZStack(alignment: .topTrailing) {  // 使用 ZStack 来叠加标签和卡片内容
            VStack(alignment: .center) {
                NavigationLink {
                    DetailView(item: item)
                } label: {
                    CachedImageView(imageURL: item.cover)
                        .frame(maxWidth: .infinity, maxHeight: .infinity)
                        .overlay(
                            VStack {
                                Spacer()  // 将文字推到图片的底部
                                HStack{
                                    Image(systemName: "flame")
                                        .font(.system(size: 12))
                                        .foregroundColor(.white)  // 白色文字
                                        .padding(.bottom, 10)  // 添加底部间距
                                    Text("\(item.read_count)K次")  // 显示文字内容
                                        .font(.system(size: 12))
                                        .foregroundColor(.white)  // 白色文字
                                        .padding(.bottom, 10)  // 添加底部间距
                                    Spacer()
                                    Image(systemName: "tv")
                                        .font(.system(size: 12))
                                        .foregroundColor(.white)  // 白色文字
                                        .padding(.bottom, 10)  // 添加底部间距
                                    Text("\(item.longs)s")  // 显示文字内容
                                        .font(.system(size: 12))
                                        .foregroundColor(.white)  // 白色文字
                                        .padding(.bottom, 10)  // 添加底部间距
                                }
                                .padding(.horizontal,10)
                                .frame(height: 20)
                                .background(
                                    LinearGradient(
                                        gradient: Gradient(colors: [Color("BgColor1").opacity(0),  Color("BgColor1").opacity(0.8)]),
                                        startPoint: .top,
                                        endPoint: .bottom
                                    )
                                )
                                
                            }
                        )
                        .id(item.id)

                    
                }
                Menu {
                    Button {
                        
                    } label: {
                        Label("稍后播放", systemImage: "plus")
                    }
                    
                    Button {
                        viewModel.addToFav(mainId:item.id , type: item.type){ success in
                            if success {
                                print("添加成功")
                            } else {
                                print("添加失败")
                            }
                        }
                    } label: {
                        Label("加入收藏", systemImage: "heart")
                    }
                    
                
                } label: {
                    VStack{
                        HStack{
                            Text(item.name)
                                .font(.system(size: 16))
                                .foregroundStyle(.white)
                                .lineLimit(1)
                                .multilineTextAlignment(.leading)  // 确保多行文本左对齐
                            Spacer()
                        }.padding(.horizontal,5)
                            .frame(height: 15)
                        
                        HStack{
                            ForEach(item.tags.prefix(3), id: \.self) { tag in
                                Text(tag)
                                    .font(.system(size: 12))
                                    .foregroundStyle(.white)
                                    .padding(.horizontal, 6)  // 调整水平 padding，增加左右间距
                                    .padding(.vertical, 4)     // 调整垂直 padding，减少上下间距
                                    .background(Color.white.opacity(0.2))  // 背景色
                                    .clipShape(RoundedRectangle(cornerRadius: 6))  // 圆角
                                    .padding(.trailing, 0)  // 每个标签之间有一些间距
                                
                            }
                            Spacer()
                            
                            Image(systemName: "ellipsis")
                                .font(.system(size: 16))
                                .foregroundStyle(.white)
                                .rotationEffect(.degrees(90))
                            
                            
                        }
                        .padding(.horizontal,5)
                        .frame(height: 35)
                    }
                }
                
            }
            // 左上角的标签部分
            if !tag.isEmpty {
                Text("\(tag)")
                    .font(.system(size: 12, weight: .medium))
                    .foregroundColor(.white)
                    .padding(.horizontal, 6)  // 调整水平 padding，增加左右间距
                    .padding(.vertical, 4)     // 调整垂直 padding，减少上下间距
                    .background(Color("MainColor"))
                    .cornerRadius(5)  // 调整圆角大小，值越小，圆角越小
                    .offset(x: -4, y: 4) // 调整标签位置，偏移到卡片的左上角
            }
        }
        .background(Color("BgColor2"))
        .cornerRadius(10)  // 添加圆角，使卡片边角平滑
        .clipShape(RoundedRectangle(cornerRadius: 10.0))
        .scaleEffect(isPressed ? 0.95 : 1)
            .simultaneousGesture(
                DragGesture(minimumDistance: 0)
                    .onChanged { _ in
                        withAnimation(.easeInOut(duration: 0.2)) {
                            isPressed = true
                        }
                    }
                    .onEnded { _ in
                        withAnimation(.easeInOut(duration: 0.2)) {
                            isPressed = false
                        }
                    }
            )
    }
}

#Preview {
    ListCard()
        .background(Color("BgColor2"))
}
